<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../lib/vue.js"></script>
  <script type="text/javascript" src="../lib/vue-router.js"></script>

</head>
<body>
  <div id="box">
    <router-link to="/one">One</router-link>
    <router-link to="/two">Two</router-link>
    <router-view></router-view>
  </div>
  <!--定义模版-->
  <template id="a">
    <div>
      第一个router
    </div>
  </template>
  <template id="b">
    <div>
      第二个router
    </div>
  </template>
  <template id="c">
    <div>
        user:{{ $route.params.id }}
    </div>
</template>
</body>
<script type="text/javascript">
  var routes = [
  {
    path:"/one",

    component:{template:"#a"}
  },
  {
    path:"/two",
    component:{template:"#b"},
    children:[
        {
            path:":id",
            component:{
                template:"#c"
            }
        }
    ]
},
  ];
  var router = new VueRouter({
    routes
  });
  // 定义路由
  new Vue({
    el:"#box",
    router
  });
</script>
</html>
